<template>
  <div class="pages">
    <div class="herader">
      <div class="userinfo">
        <div class="usericon">
          <img src="../../../static/images/default-head.png" alt="">
        </div>
        <!-- @click="myProfile()" -->
        <div class="usernameom">
          <div class="toptop">
            <div class="names">{{ userinfoing.nameMask }}</div>
            <div class="mnakbitm" v-if="userinfoing.ownerType === 'AGENCY'">服务商</div>
            <div class="mnakbitm" v-if="userinfoing.ownerType === 'BRANCH_OFFICE'">分公司</div>
            <div class="mnakbitm" v-if="userinfoing.ownerType === 'AGENCY_TEAM'">服务商团队</div>
            <div class="mnakbitm" v-if="userinfoing.ownerType === 'AGENCY_TEAM_MEMBER'">服务商团队成员</div>
            <div class="mnakbitm" v-if="userinfoing.ownerType === 'MERCHANT'">商户</div>
          </div>
          <div class="phoner">{{ phone }}</div>
        </div>
      </div>
      <div class="iconsright">
        <img src="../../../static/images/icon-arrow-white.png" alt="">
      </div>
    </div>

    <div class="ibody">
      <div class="intber" @click="My_wallet()">
        <div class="zuoleft_fl">
          <div class="icon">
            <img src="../../../static/images/icon-user-qb.png" alt="">
          </div>
          <div class="texter">我的钱包</div>
        </div>
        <div class="youright_fr">
          <img src="../../../static/images/icon-arrow-black.png" alt="">
        </div>
      </div>
      <div class="intber" @click="securitySettings()">
        <div class="zuoleft_fl">
          <div class="icon">
            <img src="../../../static/images/icon-user-aqsz.png" alt="">
          </div>
          <div class="texter">安全设置</div>
        </div>
        <div class="youright_fr">
          <img src="../../../static/images/icon-arrow-black.png" alt="">
        </div>
      </div>
      <div class="intber" @click="About_Us()">
        <div class="zuoleft_fl">
          <div class="icon">
            <img src="../../../static/images/icon-user-gywm.png" alt="">
          </div>
          <div class="texter">关于我们</div>
        </div>
        <div class="youright_fr">
          <img src="../../../static/images/icon-arrow-black.png" alt="">
        </div>
      </div>


      <div class="quit">
        <div class="quit_login" @click="intebt()">退出登录</div>
      </div>
    </div>

    <van-tabbar v-model="active" active-color="#3288FF" inactive-color="#4F4F4F">
      <van-tabbar-item icon="setting-o" replace to="/index">
        <span>首页</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon.active : icon.normal"/>
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" replace to="/information">
        <span>数据</span>
        <img slot="icon" slot-scope="props" :src="props.active ? search.actives : search.normals"/>
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" replace to="/my">
        <span>我的</span>
        <img slot="icon" slot-scope="props" :src="props.active ? user.actives : user.normals"/>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue'
import api from '../../api/PublicInterface'

Vue.prototype.$api = api
// import https from '../../https' 　　// 注意用自己的路径
import { Dialog } from 'vant'
import { Toast } from 'vant'

export default {
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background:#fff')
  },
  beforeDestroy() {
    // document.querySelector('body').setAttribute('style', '')
  },
  data() {
    return {
      //首页
      icon: {
        normal: require('../../../static/images/icon-home-def.png'),
        active: require('../../../static/images/icon-home-sel.png')
      },
      //数据
      search: {
        normals: require('../../../static/images/icon-date-def.png'),
        actives: require('../../../static/images/icon-date-sel.png')
      },
      //我的
      user: {
        normals: require('../../../static/images/icon-user-def.png'),
        actives: require('../../../static/images/icon-user-sel.png')
      },
      show: false,
      active: 2,

      // 用户信息
      userinfoing: {
        agency: {}
      },
      phone: ''//手机号
    }
  },
  mounted() {
  },
  created() {
    this.userinfo() //获取用户信息接口
  },
  methods: {
    // 获取用户信息接口
    userinfo() {
      this.$api.userinfo().then((res) => {
        console.log(res)
        if (res.status == '0000') {
          this.userinfoing = res.payload
          this.phone = res.payload.phoneNo.substr(0, 3) + '****' + res.payload.phoneNo.substr(7)
        } else {
          Toast(res.describe)
        }
      })
    },


    intebt() {
      Dialog.confirm({
        title: '提示',
        message: '是否退出？'
      })
        .then(() => {
          localStorage.clear()
          // localStorage.getItem('mytoken')
          // on confirm
          this.$router.push({ name: 'login' })
        })
        .catch(() => {
          // on cancel
        })
    },
    // 我的钱包
    My_wallet() {
      if (this.userinfoing.realNameAuthed == true) {
        this.$router.push({ name: 'My_wallet' })
      } else {
        Dialog.confirm({
          title: '提示',
          message: '暂未实名认证，请先实名认证后操作'
        })
          .then(() => {
            // on confirm
            this.$router.push({ name: 'authentication' })
          })
          .catch(() => {
            // on cancel
          })
      }

    },
    // 安全设置
    securitySettings() {
      this.$router.push({ name: 'securitySettings' })
    },
    // 关于我们
    About_Us() {
      this.$router.push({ name: 'About_Us' })
    },
    // 我的资料
    myProfile() {
      this.$router.push({ name: 'myProfile' })
    }

  }
}
</script>

<style scoped>
.pages {
  width: 100%;
}

.herader {
  width: 100%;
  height: 112px;
  background: #3288FF;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.userinfo {
  width: 90%;
  display: flex;
  align-items: center;
}

.userinfo > .usericon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #FFFFFF;
  display: flex;
  align-items: center;
}

.userinfo > .usericon > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.usernameom {
  width: 74%;
  margin-left: 16px;
}

.toptop {
  display: flex;
  align-items: center;
}

.toptop > .names {
  color: #FFFFFF;
  font-family: OPPOSans;
  font-weight: medium;
  font-size: 17px;
  letter-spacing: 0px;
}

.mnakbitm {
  padding: 3px;
  box-sizing: border-box;
  border-radius: 2px;
  background: #F2C94C;
  color: #FFFFFF;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 12px;
  letter-spacing: 0px;
  margin-left: 11px;
}

.phoner {
  color: #FFFFFF;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 14px;
  letter-spacing: 0px;
  margin-top: 12px;
}

.iconsright {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
}

.iconsright > img {
  width: 100%;
  height: 100%;
}

.ibody {
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  margin-top: 8px;
}

.intber {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #F2F2F2;
}

.zuoleft_fl {
  display: flex;
  align-items: center;
}

.zuoleft_fl > .icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
}

.zuoleft_fl > .icon > img {
  width: 100%;
  height: 100%;
}

.texter {
  color: #333333;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 15px;
  letter-spacing: 0px;
  margin-left: 10px;
}

.youright_fr {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
}

.youright_fr > img {
  width: 100%;
  height: 100%;
}

.quit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 98px;
}

.quit_login {
  width: 188px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid #3288FF;
  color: #3288FF;
  font-family: OPPOSans;
  font-weight: medium;
  font-size: 16px;
  letter-spacing: 0px;
}
</style>
